<template>
    <!-- Form Start -->
    <div class="flex justify-between mb-4">
        <el-button
            type="primary"
            @click="$router.push('/course/course/imageText/detail?type=1')"
            v-if="type == 1"
            >新建图文课程
        </el-button>
        <el-button
            type="primary"
            @click="$router.push('/course/course/audio/detail?type=2')"
            v-if="type == 2"
            >新建音频课程
        </el-button>
        <el-button
            type="primary"
            @click="$router.push('/course/course/video/detail?type=3')"
            v-if="type == 3"
            >新建视频课程
        </el-button>

        <el-input
            class="ls-input"
            v-model="params.name"
            @input="getLists"
            placeholder="请输入课程名称"
        >
            <template #append>
                <el-button icon="search" />
            </template>
        </el-input>
    </div>
    <!-- Form End -->

    <!-- Table Start -->
    <div class="mt-[20px]">
        <el-table
            ref="tableDataRef"
            height="380"
            :data="pager.lists"
            :row-key="getRowKey"
            style="width: 100%"
            v-loading="pager.loading"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" :reserve-selection="true" width="55" />
            <el-table-column label="课程名称" min-width="200">
                <template #default="scope">
                    <div class="flex col-center">
                        <view class="w-[80px]">
                            <el-image
                                style="width: 80px; height: 60px"
                                :src="scope.row.cover"
                                :fit="'cover'"
                            >
                            </el-image>
                        </view>
                        <div class="ml-[10px]">{{ scope.row.name }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column property="type" label="课程类型" max-width="160">
                <template #default="{ row }">
                    <div v-if="row.type == 1">图文</div>
                    <div v-if="row.type == 2">音频</div>
                    <div v-if="row.type == 3">视频</div>
                    <div v-if="row.type == 4">专栏</div>
                </template>
            </el-table-column>
            <el-table-column property="teacherName" label="讲师" max-width="120" />
            <el-table-column property="sellPrice" label="价格" max-width="120">
                <template #default="{ row }">
                    <div v-if="row.sellPrice != null">{{ row.sellPrice }}</div>
                    <div v-if="row.sellPrice == null">免费</div>
                </template>
            </el-table-column>
            <el-table-column property="status" label="课程状态" max-width="140">
                <template #default="scope">
                    <el-tag class="ml-2" v-if="scope.row.status === 1" type="success"
                        >上架中</el-tag
                    >
                    <el-tag class="ml-2" v-if="scope.row.status === 0" type="info">已下架</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- Table End -->

    <!-- Footer Pagination Start -->
    <div class="flex justify-end" style="height: 66px">
        <pagination
            v-model="pager"
            @change="pageChange"
            layout="total, prev, pager, next, jumper"
        />
    </div>
    <!-- Footer Pagination End -->
</template>

<script lang="ts" setup>
import { apiCourseLists } from '@/api/course/course'
import Pagination from '@/components/pagination/index.vue'
import { usePaging } from '@/hooks/usePaging'
import { withDefaults, ref } from 'vue'
import { ElTable } from 'element-plus'

/** Interface Start **/
interface paramsObj {
    type: number
    name: string
    status: number
}
/** Interface End **/
const tableDataRef = ref<InstanceType<typeof ElTable>>()
//表格已选项
const rowList = ref([])
const props = withDefaults(
    defineProps<{
        modelValue: any
        type: number
    }>(),
    {
        modelValue: [],
        type: 0
    }
)
const emit = defineEmits(['update:modelValue'])

const params = ref<paramsObj>({
    type: props.type,
    name: '',
    status: 1
})
const { pager, getLists } = usePaging({
    size: 5,
    fetchFun: apiCourseLists,
    params: params.value
})

//分页组件change
const pageChange = () => {
    getLists()
    getBeSelect()
}

//获取row-key
const getRowKey = (row: any) => {
    return row.id
}

//多选框选项改变
const handleSelectionChange = (value: any, row: any) => {
    emit('update:modelValue', value)
}

//渲染表格已选
const getBeSelect = async () => {
    setTimeout(() => {
        rowList.value.forEach((item: any) => {
            pager.lists.forEach((listItem: any, index: any) => {
                if (item.id == listItem.id) {
                    tableDataRef.value!.toggleRowSelection(pager.lists[index], true)
                }
            })
        })
    }, 200)
}
//设置表格已选项
const setBeselect = async (value: any) => {
    rowList.value = value
}
//情况表格
const clearAll = () => {
    tableDataRef.value!.clearSelection()
}

defineExpose({ clearAll, getBeSelect, setBeselect })
onMounted(() => {
    getLists()
})
</script>

<style lang="scss" scoped>
.ls-input {
    width: 240px;
}

.content {
    height: 400px;
}
</style>
